<template>
    <div>
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span>{{$t('setting.set')}}</span>
            <span></span>
        </div>
        <div class="num-list">
            <div>
                <span>{{$t('setting.versionNumber')}}</span>
                <span>1.1.1</span>
            </div>
            <div @click="changeLanguage ">
                <span>{{$t('setting.language')}}</span>
                <span>{{$t('setting.languageType')}}</span>
            </div>
            <div>
                <span>{{$t('setting.clearTheCache')}}</span>
                <span>20MB</span>
            </div>
            <div @click="$router.push({name:'contactUs'})">
                <span>{{$t('setting.contactUs')}}</span>
                <span class="fa fa-angle-right"></span>
            </div>
        </div>
        <div @click="logOut" class="setting-logout">{{$t('setting.logOut')}}</div>
    </div>
</template>
<script>
export default {
    methods: {
        logOut() {
            this.$store.commit("clearUserMsg");
            this.$router.push({ name: "login" });
        },
        changeLanguage(){
            if(this.$i18n.locale === 'zh'){
                this.$i18n.locale = 'en'
                localStorage.setItem('lang','en')
            }else{
                this.$i18n.locale = 'zh'
                localStorage.setItem('lang','zh')
            }
        }
    }
};
</script>
<style lang="less" scoped>
.header-title {
    border-bottom: 1px solid @blackColor3;
}
.num-list {
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
    color: @blackColor8;
    > div {
        .flexBetweenCenter();
        padding: 15px 0;
        border-bottom: 1px solid @blackColor3;
    }
    > div:last-child {
        border-bottom: none;
    }
}
.setting-logout {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: @blackColor8;
    border-top: 1px solid @blackColor3;
    padding: 15px 0;
    background-color: @white;
}
</style>
